<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			
		</div>
		<script>
			
			
		</script>
		
		<!-- 
		 四.插槽
		 1. Vue 实现了一套内容分发的 API，将<slot>元素作为承载分发内容的出口，这是vue文档上的说明。
		  具体来说，slot就是可以让你在组件内添加内容的‘空间’。
		  如何使用
		  //子组件 ： (假设名为：ebutton)
		  <template>
		    <div class= 'button'>
		        <button></button>
		        <slot></slot>       //slot 可以放在任意位置。（这个位置就是父组件添加内容的显示位置）
		    </div> 
		  </template>
		  
		  父组件
		  <template>
		    <div class= 'app'>
		       <ebutton>这里的内容会替换子组件里面的slot</ebutton>
		    </div>
		  </template>
		  
		  默认值 ,当父组件引用子组件的标签的时候 不传入内容 将呈现默认值
		  //子组件 ： (假设名为：ebutton)
		  <template>
		    <div class= 'button'>
		        <button>  </button>
		        <slot> 这就是默认值 </slot>
		    </div>
		  </template>
		  
		  
		  
		  2.具名插槽 （子组件 多个<slot ></slot> <slot></slot> 对应插入内容）
		  //子组件 ： (假设名为：ebutton)
		  <template>
		    <div class= 'button'>
		        <button>  </button>
		        <slot name= 'one'> 这就是默认值1</slot>
		        <slot name='two'> 这就是默认值2 </slot>
		        <slot name='three'> 这就是默认值3 </slot>
		    </div>
		  </template>
		  //父组件：（引用子组件 ebutton）
		  <template>
		    <div class= 'app'>
		       <ebutton> 
		          <template v-slot:one> 这是插入到one插槽的内容 </template>
		          <template v-slot:two> 这是插入到two插槽的内容 </template>
		          <template v-slot:three> 这是插入到three插槽的内容 </template>
		       </ebutton>
		    </div>
		  </template>
		  
		  
		  3.作用域插槽 
		  //子组件 ： (假设名为：ebutton)
		  <template>
		    <div class= 'button'>
		        <button>  </button>
		        <slot name= 'one' :value1='child1'> 这就是默认值1</slot>    //绑定child1的数据
		        <slot :value2='child2'> 这就是默认值2 </slot>  //绑定child2的数据，这里我没有命名slot
		    </div>           
		  </template>
		  
		  new Vue({
		    el:'.button',
		    data:{
		      child1:'数据1',
		      child2:'数据2'
		    }
		  })
		  //父组件：（引用子组件 ebutton）
		  <template>
		    <div class= 'app'>
		       <ebutton> 
		          // 通过v-slot的语法 将插槽 one 的值赋值给slotonevalue 
		          <template v-slot:one = 'slotonevalue'>  
		             {{ slotonevalue.value1 }}
		          </template>
		  
		          // 同上，由于子组件没有给slot命名，默认值就为default
		          <template v-slot:default = 'slottwovalue'> 
		             {{ slottwovalue.value2 }}
		          </template>
		       </ebutton>
		    </div>
		  </template>
		 -->
	</body>
</html>